﻿
<template> 
    <div>
        <x-header :left-options="{backText: ''}" class="ret"><div class="retTitle">注册</div></x-header> 
        <x-hr></x-hr>
        <div>
            <div class="btn_wrap">
                <step v-model="step2" gutter="20px">
                    <step-item :title="'输入手机号'"></step-item>
                    <step-item :title="'输入验证码'"></step-item>
                    <step-item :title="'设置密码'"></step-item>
                </step>
            </div>
            <div class="btn_wrap">
                <group title="">
                <x-input v-model="phoneValue" name="mobile" :icon-type="iconType" ref="refPhone" required
                    placeholder="请输入手机号" keyboard="number" is-type="china-mobile" :max="13"></x-input>
                </group>
            </div>
            <!-- 同意并接受注册条款 -->
            <div class="btn_wrap">
                <check-icon :value.sync="ckReg"></check-icon>
                <span>我已审慎阅读，同意并接受<a :href='loginUrl'>《淘美味用户注册条款》</a></span>
            </div>
            <div class="btn_wrap">
                <x-button type="primary" @click.native="nextStep">同意并发送短信</x-button>
            </div>
        </div> 
        <!-- x-dialog -->
        <div v-transfer-dom>
            <x-dialog v-model="showToast" class="dialog-demo">
                <div style="padding:15px;">
                    <group :title="'短信已发送至+86 ' + phoneValue">
                        <x-input placeholder="输入短信验证码" v-model="captcha">
                        <x-button slot="right" type="primary" action-type="button" mini @click.native="sendMessage">{{word}}</x-button>
                        </x-input>
                    </group>
                </div>
                <div>
                    <x-button type="primary" @click.native="nextStep2">提交验证码</x-button>
                </div>
                <div @click="closeYzm">
                    <span class="vux-close"></span>
                </div>
            </x-dialog>
        <!-- </div>
        <div v-transfer-dom> -->
            <x-dialog v-model="showPwd" class="dialog-demo">
                <div style="padding:15px;">
                    <group :title="'请设置6-16位密码'">
                        <x-input placeholder="输入密码" type="password" v-model="password1" :min="6" :max="16"></x-input>
                        <x-input placeholder="再次输入密码" type="password" v-model="password2" :equal-with="password1" ref="refPwd"></x-input>
                    </group>
                </div>
                <div>
                    <x-button type="primary" @click.native="nextStep3">提交注册</x-button>
                </div>
                <div @click="closePwd">
                    <span class="vux-close"></span>
                </div>
            </x-dialog>
        </div>
        <!-- alert -->
        <div v-transfer-dom>
            <alert v-model="showMsg" :title="msgTitle" @on-show="onShow" @on-hide="onHide"> {{ msg }}</alert>
        </div>
    </div> 
</template>
    
<script>
    import { sign, signStr } from "@/assets/js/sign.js";
    import { hex_sha1 } from "@/assets/js/sha1.js";
    import { CheckIcon,Step,StepItem,XButton,GroupTitle,Group,XInput,XHeader,XHr,Alert,XDialog,TransferDomDirective as TransferDom } from 'vux'

    export default {
        directives: {
            TransferDom
        },
        components: {
            CheckIcon,Step,StepItem,XButton,GroupTitle,Group,XInput,XHeader,XHr,Alert,XDialog
        } ,
        data () {
            return { 
                business: null, //商家信息
                loginUrl: '/ULogin',
                memberUrl: '/Member',
                word: '发送验证码',
                step2: 0,
                iconType: '',
                phoneValue: '',
                showMsg : false,
                msgTitle: '提示',
                msg: '',
                showToast: false,   //短信验证弹窗
                showPwd: false, //密码输入弹窗
                password1: '',
                password2: '',
                ckReg: false,
                captcha: '', //短信验证码
                openid: '' , //微信用户openid
                isPhoneValidate: false,   //验证手机号是否已经注册
            }
        },
        created() {
            this.business = this.$store.state.sellerInfo; 

            this.openid = this.$store.getters.getMemberPtOpenId;
        },
        props: {
            type: Object
        },
        methods: {
            nextStep () {
                // alert(this.business.id);
                let ck = this.$refs.refPhone.valid;
                if(ck == false){
                    this.iconType = 'error';
                    this.msg = '请正确输入手机号';
                    this.showMsg = true;
                    this.step2 = 0;
                    return;
                }  
                if(this.ckReg == false){
                    this.msg = '请同意《淘美味注册条款》';
                    this.showMsg = true;
                    return;
                }
                //验证手机号是否已经注册
                this.phoneValidate(); 
                if(this.isPhoneValidate == false){
                    this.msg = '手机号已注册';
                    this.showMsg = true;
                    return;
                }
                /*
                //打开短信验证
                if(this.step2 == 0){ 
                    this.showToast = true; 
                    this.sendMessage();
                    this.step2 = 1;
                    return;
                }
                //输入验证码
                if(this.step2 == 1){
                    this.showToast = false;
                    this.showPwd = true;
                    this.step2 = 2;
                    return;
                }
                //设置密码
                if (this.step2 == 2) {
                    var k = this.$refs.refPwd.valid;
                    if (k == false) {
                        this.msg = '请正确设置密码';
                        this.showMsg = true;
                        return;
                    }
                    if (this.password2 != this.password1) {
                        this.msg = '两次输入的密码不一致';
                        this.showMsg = true;
                        return;
                    }
                    if (this.password1.trim() == '') {
                        this.msg = '密码不能存在空格';
                        this.showMsg = true;
                        return;
                    }

                    if(this.registe() == 1){ 
                        // this.showPwd = false;
                        // this.msg = '注册成功';
                        // this.showMsg = false;
                    }
                }*/
            },
            //步骤2：短信验证
            nextStep2(){
                this.validateCaptcha();
            },
            //步骤3：验证密码
            nextStep3(){
                var k = this.$refs.refPwd.valid;
                if (k == false) {
                    this.msg = '请正确设置密码';
                    this.showMsg = true;
                    return;
                }
                if (this.password2 != this.password1) {
                    this.msg = '两次输入的密码不一致';
                    this.showMsg = true;
                    return;
                }
                if (this.password1.trim() == '') {
                    this.msg = '密码不能存在空格';
                    this.showMsg = true;
                    return;
                }

                this.registe();
            },
            phoneValidate(){
                let ckPhone = false;
                let urlparam = sign("/v1/api/member/GetInfoByPhone"); 
                urlparam.append("phone",this.phoneValue); 
                this.$http.post("member/GetInfoByPhone", urlparam).then(ret => {
                    if (ret.status == 200) {

                        var _code = ret.data.code || ret.data.result.code;
                        // console.log("_code: "+_code)
                        if (_code == 1) {
                            this.isPhoneValidate = false;
                            this.showToast = true; 
                            this.sendMessage();
                            this.step2 = 1; 
                            return
                        }else{
                            this.isPhoneValidate = true; 
                            this.msg = '本手机号已激活';
                            this.showMsg = true;
                            this.step2 = 0;
                            return
                        }
                    }
                }); 
            },
            registe(){
                let urlparam = sign("/v1/api/member/MemberAdd");
                urlparam.append("loginId", null);
                urlparam.append("openid", this.openid);
                urlparam.append("password",hex_sha1(this.password1));
                urlparam.append("phone",this.phoneValue);
                urlparam.append("sjid",this.business.id);
                urlparam.append("captcha", this.captcha);
                
                this.$http.post("member/MemberAdd", urlparam).then(ret => {
                    if (ret.status == 200) {
                        var _data = ret.data.resultObject;
                        var _code = ret.data.code || ret.data.result.code;
                        var _msg = ret.data.msg || ret.data.result.msg;
                        
                        if (_code == 1) {
                            // console.log('pthyxx: '+_data)
                            //注册成功后，将注册信息存到session
                            // sessionStorage.setItem("loginId", this.phoneValue); 
                            // sessionStorage.setItem("password", this.password1); 
                            // sessionStorage.setItem("phone", this.phoneValue); 
                            this.$store.commit("addMemberInfoPt", _data);
                            this.$vux.toast.show({ text: '注册成功' });
                            
                            this.showPwd = false; 
                            this.showMsg = false;
                            
                            this.$router.push("/Member/"+this.openid);
                            return 1;
                        } else {
                            this.$vux.toast.show({ type: "warn", text: _msg });
                            return -1;
                        }

                        return 1;
                            
                    } else {
                        this.$vux.toast.show({ type: "warn", text: ret.data.msg });
                        return 0;
                    }
                })
                .catch(err => {
                    this.$vux.toast.show({ type: "warn", text: err.data.msg });
                    return -1;
                });
            },

            onShow(){ },
            onHide(){ },
            closePwd(){
               this.showPwd = false;
            },
            closeYzm(){
                this.step2 = 1;
                this.showToast = false;
            },
            sendMessage(){
                if(this.isOvertime){
                    return false;
                }
                let that = this,
                    time = 60; 
                var sendTimer = setInterval(function(){
                    that.isOvertime = true;
                    time--;
                    that.word = "重新发送("+time+")";
                    if(time < 0){
                        that.isOvertime = false;
                        clearInterval(sendTimer);
                        that.word = "获取验证码";
                    }
                },1000)

                this.sendCaptcha();
            },
            //发送验证码
            sendCaptcha(){
                let urlparam = sign("/v1/api/member/CaptchaSend");
                urlparam.append("type", 1); 
                urlparam.append("phone",this.phoneValue); 
                
                this.$http.post("member/CaptchaSend", urlparam).then(ret => {
                    if (ret.status == 200) {
                        var _data = ret.data.resultObject;
                        var _code = ret.data.code || ret.data.result.code;
                        var _msg = ret.data.msg || ret.data.result.msg;
                        
                        if (_code == 1) {
                            this.$vux.toast.show({ type: "text",text: '发送成功,5分钟内有效' });
                        } else {
                            this.$vux.toast.show({ type: "warn", text: _msg });
                            return -1;
                        }

                        return 1;
                            
                    } else {
                        this.$vux.toast.show({ type: "warn", text: ret.data.msg });
                        return 0;
                    }
                })
                .catch(err => {
                    this.$vux.toast.show({ type: "warn", text: err.data.msg });
                    return -1;
                });
            },
            //校验验证码
            validateCaptcha(){
                let urlparam = sign("/v1/api/member/CaptchaValidate"); 
                urlparam.append("phone",this.phoneValue); 
                urlparam.append("captcha", this.captcha);
                
                this.$http.post("member/CaptchaValidate", urlparam).then(ret => {
                    if (ret.status == 200) {
                        var _data = ret.data.resultObject;
                        var _code = ret.data.code || ret.data.result.code;
                        var _msg = ret.data.msg || ret.data.result.msg;
                        
                        if (_code == 1) {
                            // this.$vux.toast.show({ type: "text",text: '验证成功' });
                            this.showToast = false;
                            this.showPwd = true;
                            this.step2 = 2;
                        } else {
                            this.$vux.toast.show({ type: "warn", text: _msg });
                            return -1;
                        }

                        return 1;
                            
                    } else {
                        this.$vux.toast.show({ type: "warn", text: ret.data.msg });
                        return 0;
                    }
                });
            }
        }
    }
</Script>


<style scoped lang="less">
 .ret {
    background-color:#fff; 
 }
 .retTitle{
     color: #000;
     font-size: 14px;
 }
 .inp{
     border: 1px;
 }
.btn_wrap {
  padding: 0 1rem;
  margin-top: 2rem;
}
.vux-close {
    margin-top: 8px;
    margin-bottom: 8px;
}
a {
  color: rgb(255, 145, 0);    
//   font-size: 18px; 
  text-decoration: underline;
}
</style>